<template>
	<view :class="vuex_theme">
		<!-- 标题组件 -->
		

		<m-picker mode="region" ref="uPicker" v-model="regionShow" @confirm="changArea" :area-code="codeArr"></m-picker>
		
		<view class="cu-card">
			<view class="cu-item margin-sm padding-sm radius">
				<view class="flex text-bold margin-bottom-sm">
					<view class="flex-sub ">
						<text>收货人：</text>
					</view>
					<view class="flex-twice margin-left-sm">
						<text>手机号码：</text>
					</view>
				</view>
				<view class="flex  margin-bottom-sm ">
					<view class="flex-sub light-bg radius padding-xs">
						<input v-model="params.name" />
					</view>
					<view class="flex-twice light-bg radius margin-left-sm padding-xs">
						<input type="number" v-model="params.mobile" />
					</view>
				</view>
				<view class="text-bold margin-bottom-sm">
					<view>
						<text>所在地区：</text>
					</view>
				</view>
				<view class="margin-bottom-sm">
					<view class=" light-bg radius padding-xs" @click="regionPicker()">
						<text>
							{{(params.province?params.province:'请选择')+params.city+params.area}}
						</text>
						<!-- <input placeholder="请选择" disabled v-bind="params.area" /> -->
					</view>
				</view>
				<view class="text-bold margin-bottom-sm">
					<view>
						<text>详细地址：</text>
					</view>
				</view>
				<view class="margin-bottom-sm">
					<view class=" light-bg radius text padding-sm">
						<textarea class="textarea" maxlength="100" v-model="params.details"></textarea>
					</view>
				</view>
				<view class="text-bold margin-bottom-sm">
					<view>
						<text>
							设置默认地址：
						</text>
					</view>
				</view>
				<view class="margin-bottom-sm">
					<m-switch v-model="params.default" size="50rpx"></m-switch>
				</view>
			</view>
			<view class="cu-item margin-sm padding-sm radius ">
				<view class="text-bold margin-bottom-sm">
					<view>
						<text>地址识别：</text>
					</view>
				</view>
				<view class="margin-bottom-sm ">
					<view class="radius light-bg padding-xs text">
						<textarea class="textarea" maxlength="-1" v-model="address" placeholder="粘贴文本,可自动识别姓名和地址等"></textarea>
					</view>
				</view>
				<view class="text-right">
					<view class="cu-btn main-bg round sm" @click="addressSort()">
						<text>智能识别</text>
					</view>
				</view>
				<view class="bottom-group padding text-center ">
					<button class="cu-btn main-bg margin-lr-sm round lg" @click="submit">
						<text class="text">保存新建地址</text>
					</button>
				</view>
			</view>

			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showLoad: false,
				regionShow: false,
				codeArr: ["43", "4305", "430521"],
				address: '',
				params: {
					name: '',
					mobile: '',
					province: '',
					city: '',
					area: '',
					details: '',
					code: '430521',
					default: false,
				}
			};
		},
		onShow() {
			//#ifdef APP-VUE
			// 初始化导航状态栏颜色
			this.$common.initBarColor();
			//#endif
		},
		methods: {
			regionPicker() {
				this.regionShow = true;
			},
			// 地址代码转换数组
			setCodeArr(code){
				this.codeArr = [
					code.substr(0, 2), code.substr(0, 4), code.substr(0, 6)
				];
			},
			// 地址智能识别
			addressSort() {
				let address = this.$common.addressSort(this.address);
				
				console.log('add', address.code.substr(0, 1));
				// 历遍并替换
				for (let key in this.params) {
					this.params[key] = address[key];
				}
			},
			submit() {
				let params = this.params;
				if (!this.$u.test.mobile(params.mobile)) {
					this.$common.showToast('手机号码不正确');
				} else if (this.$u.test.isEmpty(params.name)) {
					this.$common.showToast('名字为空');
				} else if (this.$u.test.isEmpty(params.area)) {
					this.$common.showToast('请选所在地区');
				} else if (!this.$u.test.rangeLength(params.details, [3, 128])) {
					this.$common.showToast('请填写详细地址)');
				} else {
					this.showLoad = true;
					
					var that = this;
					this.$api.request('/api/moyi/address/add', this.params, this.$store.state.token, function(res_arr){
						that.showLoad = false;
						if (res_arr.code) {
							that.$common.showToast('添加成功');
							setTimeout(() => {
								uni.navigateBack({});
							}, 500);
						}
					});
					
					// this.$u.post('address/add', this.params).then(res => {
					// 	this.showLoad = false;
					// 	if (res) {
					// 		this.$common.showToast('添加成功');
					// 		setTimeout(() => {
					// 			uni.navigateBack({});
					// 		}, 500);
					// 	}
					// });
					
				}
			},
			changArea(e) {
				this.params.area = e.area.label;
				this.params.city = e.city.label;
				this.params.province = e.province.label;
				this.codeArr = [e.province.value, e.city.value, e.area.value];
				this.params.code = e.area.value;
			},
			starBtn(index) {

			}
		}
	};
</script>


<style lang="scss">
	@import '@/moyi-ui/form.scss';

	// 布局感觉没必要统一 这里去除输入框下方边框线
	input {
		border-bottom: 0;
		font-size: inherit !important;
	}

	.textarea {
		width: auto;
		height: 150rpx;
		font-size: inherit !important;
	}
</style>
